import React from './react';
import ReactDOM from './react-dom';


const ele = (
    <div className="nf" title="hea" style={{ height: 100, color: 'red' }}>
        hehe
        <h3 className="header" onClick={() => alter()} >
            标题
        </h3>
    </div >
);

// 类组件
class Ls extends React.component {
    constructor(props) {
        super(props);
        this.state = {
            name: '弄',
            a: 1,
            num: 0
        }
    }

    componentWillMount() {
        console.log(1)
    }
    componentDidMount() {
        for (let i = 0; i < 100; i++) {
            this.setState((prevState) => {
                // console.log(prevState);
                return {
                    num: prevState.num + 1
                }
            })
        }
        console.log(2)
    }
    componentWillReciveProps() {
        console.log(3)
    }
    componentWillUpdate() {
        console.log(4)
    }
    componentDidUpdate() {
        console.log(5)
    }
    componentUnMount() {
        console.log(6)
    }
    changeState() {
        this.setState({
            name: 'liuliu',
            a: this.state.a + 1
        });
    }

    render() {
        return <div onClick={() => this.changeState()}> wa aea{this.state.a}</div>
    }
}

// 函数式组件
const ElC = (props) => {
    return (
        <div className="who">
            我是谁{props.title}
        </div>
    )
}
const alter = () => {
    window.alert(1);
}
// console.log((ele));
// console.log(<ElC title="hehe"></ElC>)
// console.log(<Ls></Ls>)


/**
 * 传的字符串
 *  ReactDOM.render('ele', document.querySelector('#root'))
 * 
 * 
 * 为什么页面要引用react
 * 
 * React 将jsx转化成有对象
 * */

/**
 * 传的虚拟DOM对象
 */
ReactDOM.render(ele, document.querySelector('#root'))


/**
 * 传入一个组件
 *
 */

// ReactDOM.render(<ElC title="hehe"></ElC>, document.querySelector('#root'))
ReactDOM.render(<Ls></Ls>, document.querySelector('#root'))
// alert(1);
// return ele;
/**
 * createElement(tag,attrs,children1)
 *
 */